<template>
  <Dialog v-model="dialogVisible" title="" width="90%" top="50px">
    <div>
      <el-table :data="tableData" border v-if="type === 1">
        <el-table-column fixed="left" type="index" label="序号" width="70" />
        <el-table-column fixed="left" prop="name" label="技术" width="180" align="center" />
        <el-table-column label="污染物类型" align="center">
          <el-table-column prop="zjs" label="重金属" align="center">
            <template #default="scope">
              <el-input v-model="tableData[scope.$index].zjs" placeholder="请输入" />
            </template>
          </el-table-column>
          <el-table-column prop="wjw" label="无机物" align="center">
            <template #default="scope">
              <el-input v-model="tableData[scope.$index].wjw" placeholder="请输入" />
            </template>
          </el-table-column>
          <el-table-column prop="ldVocs" label="卤代VOCs" align="center">
            <template #default="scope">
              <el-input v-model="tableData[scope.$index].ldVocs" placeholder="请输入" />
            </template>
          </el-table-column>
          <el-table-column prop="fldVocs" label="非卤代VOCs" align="center">
            <template #default="scope">
              <el-input v-model="tableData[scope.$index].fldVocs" placeholder="请输入" />
            </template>
          </el-table-column>
          <el-table-column prop="ldSvocs" label="卤代SVOCs" align="center">
            <template #default="scope">
              <el-input v-model="tableData[scope.$index].ldSvocs" placeholder="请输入" />
            </template>
          </el-table-column>
          <el-table-column prop="fldSvocs" label="非卤代SVOCs" align="center">
            <template #default="scope">
              <el-input v-model="tableData[scope.$index].fldSvocs" placeholder="请输入" />
            </template>
          </el-table-column>
          <el-table-column prop="syl" label="石油类" align="center">
            <template #default="scope">
              <el-input v-model="tableData[scope.$index].syl" placeholder="请输入" />
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="NAPL" align="center">
          <el-table-column prop="ywLnapl" label="NAPL" align="center">
            <template #default="scope">
              <el-input v-model="tableData[scope.$index].ywLnapl" placeholder="请输入" />
            </template>
          </el-table-column>
          <el-table-column prop="ywDnapl" label="LNAPL" align="center">
            <template #default="scope">
              <el-input v-model="tableData[scope.$index].ywDnapl" placeholder="请输入" />
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="有机物浓度" align="center">
          <el-table-column prop="yjwG" label="高" align="center">
            <template #default="scope">
              <el-input v-model="tableData[scope.$index].yjwG" placeholder="请输入" />
            </template>
          </el-table-column>
          <el-table-column prop="yjwZ" label="中" align="center">
            <template #default="scope">
              <el-input v-model="tableData[scope.$index].yjwZ" placeholder="请输入" />
            </template>
          </el-table-column>
          <el-table-column prop="yjwD" label="低" align="center">
            <template #default="scope">
              <el-input v-model="tableData[scope.$index].yjwD" placeholder="请输入" />
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="无机物浓度" align="center">
          <el-table-column prop="wjwG" label="高" align="center">
            <template #default="scope">
              <el-input v-model="tableData[scope.$index].wjwG" placeholder="请输入" />
            </template>
          </el-table-column>
          <el-table-column prop="wjwZ" label="中" align="center">
            <template #default="scope">
              <el-input v-model="tableData[scope.$index].wjwZ" placeholder="请输入" />
            </template>
          </el-table-column>
          <el-table-column prop="wjwD" label="低" align="center">
            <template #default="scope">
              <el-input v-model="tableData[scope.$index].wjwD" placeholder="请输入" />
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>

      <el-table :data="tableData" border v-if="type === 2">
        <el-table-column fixed="left" type="index" label="序号" width="70" />
        <el-table-column fixed="left" prop="name" label="技术" width="180" align="center" />
        <el-table-column prop="bqdzyjzlx" label="包气带主要介质类型" align="center" />
        <el-table-column prop="badhd" label="包气带厚度" align="center" />
        <el-table-column prop="hscstxs" label="含水层渗透系数" align="center" />
        <el-table-column prop="dxswnjbh" label="地下水位年际变化" align="center" />
        <el-table-column prop="dxslx" label="地下水流速" align="center" />
        <el-table-column prop="ph" label="pH" align="center" />
        <el-table-column prop="eh" label="eh" align="center" />
      </el-table>
    </div>
    <template #footer>
      <el-button :disabled="formLoading" type="primary" @click="submit">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>

<script lang="ts" setup>
import { transScore, updateTrans, getTrans } from '@/api/appraisal/index'

const keys = {
  1: [
    'zjs',
    'wjw',
    'ldVocs',
    'fldVocs',
    'ldSvocs',
    'fldSvocs',
    'syl',
    'ywLnapl',
    'ywDnapl',
    'yjwG',
    'yjwZ',
    'yjwD',
    'wjwG',
    'wjwZ',
    'wjwD'
  ],
  2: ['bqdzyjzlx', 'badhd', 'hscstxs', 'dxswnjbh', 'dxslx', 'ph', 'eh']
}
const message = useMessage()

const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const tableData = ref<any[]>([])
const type = ref(1)
const listData = ref<any[]>([])

const open = (data, Ttype) => {
  dialogVisible.value = true
  listData.value = data
  type.value = Ttype
  init()
}
defineExpose({ open })

const init = async () => {
  tableData.value = await getTrans(type.value)
}

const emit = defineEmits(['success'])

const submit = async () => {
  formLoading.value = true
  const arrData = tableData.value.map((item) => {
    return keys[type.value].map((key) => {
      return item[key]
    })
  })
  try {
    const data = await transScore(arrData)
    await updateTrans(type.value, tableData.value)

    const updateList = tableData.value.map((item, row) => {
      const itemSou = {
        name: item.name
      }
      keys[type.value].forEach((key, col) => {
        itemSou[key] = data[row][col]
      })
      return itemSou
    })
    // 更新列表

    emit('success', updateList)
    message.success('更新成功')
    dialogVisible.value = false
  } finally {
    formLoading.value = false
  }
}

// 实时计算评分
const autoFillValue = (data) => {
  const result = data.map((item) => {
    return {
      name: item.name,
      wrwlx: item.wrwlx,
      ywLnapl: item.lnapl,
      ywDnapl: item.dnapl,
      wrwnd: item.wrwnd
    }
  })
  console.log(result)
  return result
}
</script>
